<h3>注册</h3>
<form nz-form #form="ngForm">
  <nz-form-item class="mb-md">
    <nz-form-control
      nzErrorTip="请输入姓名！"
      [nzValidateStatus]="name.invalid && (name.dirty || name.touched) ? 'error' : ''"
      nzHasFeedback
    >
      <nz-input-group nzPrefixIcon="anticon anticon-user">
        <input
          #name="ngModel"
          autocomplete="off"
          nz-input
          [(ngModel)]="userDto.name"
          name="name"
          placeholder="姓名"
          required
        />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item class="mb-md">
    <nz-form-control
      nzErrorTip="请选择学校！"
      [nzValidateStatus]="school.invalid && (school.dirty || school.touched) ? 'error' : ''"
      nzHasFeedback
    >
      <app-school-select #school="ngModel" name="school" required [(ngModel)]="userDto.school.id"> </app-school-select>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item class="mb-md">
    <nz-form-control
      [nzErrorTip]="erroremail"
      [nzValidateStatus]="mail.invalid && (mail.dirty || mail.touched) ? 'error' : ''"
      nzHasFeedback
    >
      <nz-input-group nzPrefixIcon="anticon anticon-mail">
        <input
          #mail="ngModel"
          autocomplete="off"
          nz-input
          nzFor="email"
          [(ngModel)]="userDto.mail"
          name="mail"
          placeholder="邮箱"
          [userId]="userDto.id"
          app-async-email-validator
          required
          email
        />
      </nz-input-group>
      <ng-template #erroremail let-control>
        <ng-container *ngIf="mail.hasError('required')">
          请输入邮箱!
        </ng-container>
        <ng-container *ngIf="mail.hasError('email')">
          请输入正确邮箱!
        </ng-container>
        <ng-container *ngIf="mail.hasError('nameExists')">
          邮箱已被占用!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item class="mb-md">
    <nz-form-control
      [nzErrorTip]="erroraccout"
      [nzValidateStatus]="account.invalid && (account.dirty || account.touched) ? 'error' : ''"
      nzHasFeedback
    >
      <nz-input-group nzPrefixIcon="anticon anticon-user">
        <input
          #account="ngModel"
          autocomplete="off"
          nz-input
          [(ngModel)]="userDto.account"
          name="account"
          [userId]="userDto.id"
          app-async-account-validator
          placeholder="登录名"
          required
        />
      </nz-input-group>
      <ng-template #erroraccout let-control>
        <ng-container *ngIf="account.hasError('required')">
          请输入登录名!
        </ng-container>
        <ng-container *ngIf="account.hasError('nameExists')">
          登录名已被占用!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control
      [nzErrorTip]="errorTpl"
      [nzValidateStatus]="password.invalid && (password.dirty || password.touched) ? 'error' : ''"
      nzHasFeedback
    >
      <nz-input-group nzPrefixIcon="anticon anticon-lock">
        <input
          #password="ngModel"
          autocomplete="off"
          nz-input
          style="height: 38px;"
          type="password"
          [(ngModel)]="userDto.password"
          name="password"
          placeholder="密码"
          required
        />
      </nz-input-group>
      <app-password-strength [password]="userDto.password" [(level)]="level"></app-password-strength>
      <ng-template #errorTpl let-control>
        <ng-container *ngIf="password.hasError('required')">
          应请填写最少8位密码!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <button
      nz-button
      nzType="primary"
      nzSize="large"
      type="submit"
      (click)="validate(true)"
      [nzLoading]="loading"
      class="submit"
    >
      提交
    </button>
    <a class="login" routerLink="/passport/login">登录</a>
  </nz-form-item>
</form>
